
<html>
    <head>
        <script src="js/jquery-1.10.1.min.js"></script>
        <style type="text/css">
            /* .colum{
                float: left;
                text-align: center;
                width: 40px;
                line-height: 40px;
                font-size: 18px;
                background: blue;
                margin: 10px;
                color: white;
                height: 40px;
                overflow: hidden;
                
            } */

             .colum{
                float: left;
                text-align: center;
                width: 20px;
                line-height: 30px;
                font-size: 27px;
                /* margin: 10px; */
                color: rgb(21, 239, 211);
                height: 30px;
                overflow: hidden;
                font-family: "Source Sans Pro", sans-serif;
                
            } 
        </style>
    </head>
    <body>
        <div id="num"></div>
    </body>
    <script>
        // function initnum(e, val){
        //     var numarr = (val+'').split('');
        //     var numcontent = '';
        //     for(var i=0;i<numarr.length;i++){
        //         numcontent += '<div class="colum"><div class="row" style="margin-top:'+-numarr[i]*40+'px">0</div><div class="row">1</div><div class="row">2</div><div class="row">3</div><div class="row">4</div><div class="row">5</div><div class="row">6</div><div class="row">7</div><div class="row">8</div><div class="row">9</div></div>'
        //     }
        //     $('#'+e).html(numcontent);
        // }
        function animal(e, start, end){
            var numarr = (start+'').split('');
            var numcontent = '';
            for(var i=0;i<numarr.length;i++){
                numcontent += '<div class="colum"><div class="row" style="margin-top:'+-numarr[i]*30+'px">0</div><div class="row">1</div><div class="row">2</div><div class="row">3</div><div class="row">4</div><div class="row">5</div><div class="row">6</div><div class="row">7</div><div class="row">8</div><div class="row">9</div></div>'
            }
            $('#'+e).html(numcontent);

            var startarr = (start + '').split('');
            var endarr = (end + '').split('');
            var instance = endarr.length-startarr.length;
            for(var i=0;i<instance;i++){
                $('#'+e).prepend('<div class="colum"><div class="row" style="margin-top:'+-(instance-endarr[i])*30+'px">0</div><div class="row">1</div><div class="row">2</div><div class="row">3</div><div class="row">4</div><div class="row">5</div><div class="row">6</div><div class="row">7</div><div class="row">8</div><div class="row">9</div></div>')
            }
            for(var j=0;j<endarr.length;j++){
                $($($('#'+e+' .colum')[j]).find('.row')[0]).animate({marginTop: -endarr[j]*30+'px'})
            }
        }
        
      //  initnum('num', 12900);
        animal('num', 0, 2008900);
       
    </script>
</html>